﻿<UserControl x:Class="Dotway.WPF.Samples.DotwaySampleApplication.GrayscaleEffectSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:effects="clr-namespace:Dotway.WPF.Effects;assembly=Dotway.WPF.Effects"
    >

    <UserControl.Resources>

        <DataTemplate x:Key="itemTemplate">
            <Border BorderBrush="White" BorderThickness="2" Width="300" Height="200" Margin="3">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1.0" StartPoint="0.5,0.0">
                        <GradientStop Color="#FFFF0000" Offset="0"/>
                        <GradientStop Color="#FFFFFF00" Offset="0.166"/>
                        <GradientStop Color="#FF00FF00" Offset="0.333"/>
                        <GradientStop Color="#FF00FFFF" Offset="0.5"/>
                        <GradientStop Color="#FF0000FF" Offset="0.66"/>
                        <GradientStop Color="#FFFF00FF" Offset="0.833"/>
                        <GradientStop Color="#FFFF0000" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <Border.Effect>
                    <effects:GrayscaleEffect x:Name="grayscaleEffect"/>
                </Border.Effect>
                <Border.Triggers>
                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="1.0" Duration="0:0:0.3" AccelerationRatio="0.10" DecelerationRatio="0.20" Storyboard.TargetName="grayscaleEffect" Storyboard.TargetProperty="(effects:GrayscaleEffect.DesaturationFactor)" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0.0"  Duration="0:0:4" AccelerationRatio="0.10" DecelerationRatio="0.20" Storyboard.TargetName="grayscaleEffect" Storyboard.TargetProperty="(effects:GrayscaleEffect.DesaturationFactor)" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Border.Triggers>
                <TextBlock Text="{Binding}" />
            </Border>
        </DataTemplate>

    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Text="Hover over the item to see them in color. This effect could be used for a focus/context scenario." />
                   
        <ItemsControl Grid.Row="1" x:Name="myItemsControl" ItemTemplate="{StaticResource itemTemplate}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>            
        </ItemsControl>

    </Grid>

</UserControl>
